<%--
  Created by IntelliJ IDEA.
  User: 胡斌
  Date: 2021/6/20
  Time: 21:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>Title</title>
<%--    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>--%>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<body>
<form action="">
    用户名：<input type="text" name="pname" id="pname"/><br>
    密码：<input type="password" name="password" id="password"/> <br>
    年龄：<input type="text" name="page" id="page"><br>
    <input type="button" id="btnTest" value="测试"/>
</form>
<script type="text/javascript">
    $(function(){
        $('#btnTest').click(function(){
            //获取输入的值pname为id
            var pname = $("#pname").val();
            var password = $("#password").val();
            var page = $("#page").val();
            $.ajax({
                // 在jsp中使用ajax时url不用写域名部分，直接从控制器写就行，最前面的"/"别忘了
                url: "/person/testJson",
                type: "post",
                async: false,
                data: JSON.stringify({
                    pname: pname,
                    password: password,
                    page: page
                }),
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        alert("输入的用户名：" + data.pname + "，密码：" + data.password
                            + "， 年龄：" + data.page);
                    }
                }
            });
        })
    })
</script>
</body>
</html>
